<template>
	<view class="cate">
		<scroll-view style="height: 1000rpx;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
		            :refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"
		            @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" class="large-cate">
			<!-- 大类 -->
			<view style="background-color: #f8f8f8;">
				<!-- <ul> -->
					<view v-for="(item,index) in catesItems" :key="index" 
					@click="changeTgeIndex(index, item.name, item.value)"
					:class="{unsatisfied:unsatisfied,
						tagActivity: CatesCurrentIndex == index}"
					>
						分类{{item.name}}
					</view>
				<!-- </ul> -->
			</view>
		</scroll-view>
		<scroll-view style="height: 1000rpx;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
		            :refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"
		            @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" class="small-cate">
			<!-- 小类 -->
			<view>
				{{content}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { uniGrid } from '@dcloudio/uni-ui'
	export default {
		name:"custCateGrid",
		components: {
			uniGrid
		},
		data() {
			return {
				// 大类
				catesItems : [
					{value:1,name:1},{value:2,name:2},{value:3,name:3},{value:4,name:4},{value:5,name:5},{value:6,name:6},{value:7,name:7},{value:8,name:8},{value:9,name:9},{value:10,name:10},{value:11,name:11},{value:12,name:12},{value:13,name:13},{value:14,name:14},{value:15,name:15},{value:16,name:16},{value:17,name:17},{value:18,name:18},{value:19,name:19},{value:20,name:20}
				],
				// 选中大类的index
				CatesCurrentIndex: 0,
				// 选中大类下的内容
				content: `
					<div>阿斯顿发大水发沙发沙发沙发士大夫撒发撒地方撒方式</div>
					<div>阿斯顿发大水发沙发沙发沙发士大夫撒发撒地方撒方式</div>
					<div>阿斯顿发大水发沙发沙发沙发士大夫撒发撒地方撒方式</div>
					<div>阿斯顿发大水发沙发沙发沙发士大夫撒发撒地方撒方式</div>
					<div>阿斯顿发大水发沙发沙发沙发士大夫撒发撒地方撒方式</div>
					<div>阿斯顿发大水发沙发沙发沙发士大夫撒发撒地方撒方式</div>
					<div>阿斯顿发大水发沙发沙发沙发士大夫撒发撒地方撒方式</div>
					<div>阿斯顿发大水发沙发沙发沙发士大夫撒发撒地方撒方式</div>
					<div>阿斯顿发大水发沙发沙发沙发士大夫撒发撒地方撒方式</div>
					<div>阿斯顿发大水发沙发沙发沙发士大夫撒发撒地方撒方式</div>
					<div>阿斯顿发大水发沙发沙发沙发士大夫撒发撒地方撒方式</div>
					<div>阿斯顿发大水发沙发沙发沙发士大夫撒发撒地方撒方式</div>
					<div>阿斯顿发大水发沙发沙发沙发士大夫撒发撒地方撒方式</div>
				`,
				// 第一页的原始内容
				oldContent: "",
				// 滚动位置
				scrollTop: 0,
				// 原始位置
				old: {
					scrollTop: 0
				},
				
				isShow: true
			};
		},
		onLoad: () => {
			getLargeCates();
			getSmallCatesByLargeCate();
		},
		methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			/**
			 * 获取大类
			 */
			getLargeCates: () => {
				
			},
			/**
			 * 获取小类
			 */
			getSmallCatesByLargeCate: () => {
				
			},
			/**
			 * 选择大类时的事件
			 * @param {Object} index
			 * @param {Object} name
			 * @param {Object} value
			 */
			changeTgeIndex(index, name, value){
				console.log(index,name,value)
				this.CatesCurrentIndex = index;
			}
		}
	}
</script>

<style lang="scss">
.cate {
	display: flex;
}
.large-cate{
	width: 20%;
}
.small-cate{
	width: 80%;
}


/* .unsatisfied{
	background-color: #3190e8;
	color: #3190e8;
	height: 100rpx;
} */
.tagActivity{
	background-color: #FFFFFF;
	height: 50rpx;
	text-align: center;
	line-height: 50rpx;
	color: #0055FF;
}
</style>
